<template>
  <div class="body">
    <my-header-4></my-header-4>
    <div class="kongbai"></div>
    <div class="shoujihao">
      <input type="text" v-model="user" placeholder="请输入手机号" />
      <div><span>发送验证码</span></div>
    </div>
    <div class="yanzhengma">
      <input type="text" v-model="code" placeholder="请输入短信验证码" />
    </div>
    <div class="denglu" @click="loginFn">登录</div>
    <div class="xieyi">
      <div>
        <input type="checkbox" /> 我已阅读并同意<span
          >《猫眼用户服务协议》《隐私政策》</span
        >
      </div>
      <div>客服电话：<span>1010-5335</span></div>
      <div class="x1">未注册的手机号将自动生成新账户</div>
    </div>
  </div>
</template>

<script>
//引入头部的组件
import MyHeader4 from "../components/MyHeader4.vue";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Login",
  //注册
  components: {
    MyHeader4,
  },
  data() {
    return {
      user: "",
      code: "",
    };
  },
  methods: {
    loginFn() {
      console.log(this.user);
      localStorage.setItem("user", this.user);
      //跳转到首页
      this.$router.push("/me");
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  width: 100%;
  height: 100vh;
  background-color: #f8f8f8;
}
.kongbai {
  margin: auto;
  width: 90%;
  height: 50px;
  // border: 1px solid rebeccapurple;
}
.shoujihao {
  margin: auto;
  display: flex;
  width: 90%;
  height: 50px;
  border-bottom: 1px solid #e5e5e5;
  span {
    color: #ccc;
  }
  // border: 1px solid rebeccapurple;
  input {
    width: 70%;
    border: none;
    outline: none;
    background-color: #f8f8f8;
  }

  div {
    display: flex;
    color: #757575;
    font-size: 0.4rem;
    align-items: center;
  }
}
.yanzhengma {
  margin: auto;
  display: flex;
  width: 90%;
  height: 50px;
  border-bottom: 1px solid #e5e5e5;
  // border: 1px solid rebeccapurple;
  input {
    width: 100%;
    border: none;
    outline: none;
    background-color: #f8f8f8;
  }
}
.denglu {
  width: 90%;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e5e5e5;
  color: #999;
  border-radius: 25px;
  margin-top: 20px;
  font-size: 0.4rem;
}
.xieyi {
  width: 90%;
  height: 120px;
  margin: auto;
  input {
    top: 0.2667rem;
  }
  div {
    margin-top: 5px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #999;
    font-size: 0.3467rem;
    span {
      color: #df2d2d;
    }
  }
  .x1 {
    font-size: 0.3733rem;
  }
}
</style>